<template>
  <div class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="报警情况"
      back-icon-color="#fff"
      title-color="#fff"
    />
    <u-tabs
      :list="list"
      is-scroll
      :current="current"
      @change="change"
      active-color="rgb(1, 72, 51)"
      inactive-color="rgb(153, 153, 153)"
    ></u-tabs>
    <scroll-view
      :scroll-into-view="toView"
      scroll-with-animation
      scroll-y
      class="content"
      @scroll="handleScroll"
    >
      <div class="city-box" v-if="countNoShow">
        <div class="city-input">
          <u-input
            v-model="searchData.cityStr"
            placeholder="请选择"
            type="select"
            @click="cityShow = true"
            :select-open="cityShow"
          />
        </div>
      </div>
      <!-- <div class="mineBox" v-else>
        <div class="mine-num">
          煤矿数量
          <span @click="goMineList" class="mine-num-val">
            {{ customerList.length }}
            <u-icon name="arrow-right" color="rgba(0,0,0,0.5)"></u-icon>
          </span>
        </div>
        <coalStatistics :countyNo="countyNo"></coalStatistics>
      </div> -->

       <!-- :countyNo="countyNo" -->
        <coalStatistics :customerList="customerList"></coalStatistics>
      <div id="view1">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="报警煤矿"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <view class="situation">
              <view
                v-for="item of alarmTypeList"
                :key="item.id"
                class="situationItem"
                @click="goAlarmMinesList(item.id, item.label)"
              >
                <!-- <u-section
                  :title="item.label"
                  sub-title=""
                  line-color="rgb(255,0,0)"
                  :bold="false"
                  color="rgb(102, 102, 102)"
                ></u-section> -->
                <div class="situationItem-status">
                  <div class="border"></div>
                  <p class="situationItem-label">{{ item.label }}</p>
                </div>
                <div class="situationItemText">
                  <span class="situationItemSpan1">
                    {{
                      item.label == "超出地测预报超掘"
                        ? alarmCounts.groundCount
                        : ""
                    }}
                    {{
                      item.label == "超出探放水超掘"
                        ? alarmCounts.waterCount
                        : ""
                    }}
                    {{
                      item.label == "超出区域防突超掘"
                        ? alarmCounts.regionJjCount
                        : ""
                    }}
                    {{
                      item.label == "超出区域防突超采"
                        ? alarmCounts.regionCmCount
                        : ""
                    }}
                    {{
                      item.label == "超出局部防突超掘"
                        ? alarmCounts.partJjCount
                        : ""
                    }}
                    {{
                      item.label == "超出局部防突超采"
                        ? alarmCounts.partCmCount + " "
                        : ""
                    }}
                  </span>
                  <span>家</span>
                </div>
              </view>
            </view>
          </view>
        </u-card>
      </div>

      <div id="view2">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="实时报警"
                color="rgb(1, 72, 51)"
                font-size="30"
                @click="goAlarmList"
              ></u-section>
              <!-- <div class="more" @click="goAlarmList">
                <div>更多<u-icon name="arrow-right-double"></u-icon></div>
              </div> -->
            </view>
          </view>
          <scroll-view
            slot="body"
            :scroll-y="true"
            class="u-flex-1 of-hide scrollView2"
            refresher-enabled="true"
            :refresher-triggered="triggered"
            :refresher-threshold="50"
            refresher-background="#f5f5f5"
            @refresherrefresh="onRefresh"
            @scrolltolower="onScrollToLower"
          >
            <div class="realTimeAlarm">
              <div
                class="realTimeAlarm-item"
                v-for="(item, index) of realTimeAlarmList"
                :key="item.customerName + index"
              >
                <div class="realTimeAlarm-item-head">
                  <div class="alarmType">{{ item.alarmType }}</div>
                  <div
                    :style="item.isOver == 1 ? statusStyle1 : statusStyle2"
                    v-if="item.isOver"
                    class="status"
                  >
                    {{ item.isOver == 1 ? "已结束" : "未结束" }}
                  </div>
                </div>
                <div class="mines-name">
                  {{ item.customerName }}
                </div>
                <div class="alarm-text">
                  <div>报警开始时间：{{ item.beginTime }}</div>
                  <div>报警结束时间：{{ item.endTime || "/" }}</div>
                  <div>报警描述：{{ item.alarmType }}</div>
                </div>
              </div>
            </div>
            <template v-if="!showEmpty">
              <view class="c-empty p-absolute-center">
                <u-empty
                  text="抱歉，暂无相关数据~"
                  :src="require('@/static/image/empty.png')"
                ></u-empty>
              </view>
            </template>
            <view class="p-t-10 p-b-10" v-else>
              <u-loadmore :status="status" />
            </view>
          </scroll-view>
        </u-card>
      </div>
    </scroll-view>

    <u-picker
      mode="selector"
      v-model="cityShow"
      :range="cityList"
      @confirm="cityConfirm"
      range-key="label"
    ></u-picker>
  </div>
</template>

<script>
import coalStatistics from "../components/coalStatistics.vue";

export default {
  components: { coalStatistics },
  data() {
    return {
      current: 0,
      toView: "",
      statusStyle1: "background:#CCCCCC",
      statusStyle2: "background:red",
      list: [
        {
          name: "报警煤矿",
        },
        {
          name: "实时报警",
        },
      ],
      searchData: {},
      customerList: [],
      alarmTypeList: [],
      alarmCounts: {},
      realTimeAlarmList: [],
      countyNo: "",
      countNoShow: false,
      cityShow: false,
      cityList: [],
      page: {
        pageSize: 20,
        pageNumber: 1,
      },
      showEmpty: true,
      status: "loading",
      triggered: false,
    };
  },
  async onLoad() {
    if (getApp().globalData.userInfo.superviseLevel === "40") {
      this.countNoShow = true;
    }
    // 获取区县
    this.getCityList();
  },
  methods: {
    init() {
      // 获取煤矿
      this.getCustomerList();
      // // 获取工作面情况
      // this.statisticEngInfo()
      // // 三量可采期情况
      // this.situation()
      this.getRealTimeAlarm();
      this.getAlarmCount();
      this.getAlarmTypesLabel();
    },
    cityConfirm(index) {
      this.searchData.cityStr = this.cityList[index].label;
      this.countyNo = this.cityList[index].id;
      this.init();
    },
    change(index) {
      this.current = index;
      this.toView = `view${index + 1}`;
    },
    getCityList() {
      this.$get("/cjt/common/app/getCountyList").then((res) => {
        this.cityList = res.body;
        this.searchData.cityStr = res.body[0].label;
        this.countyNo = this.cityList[0].id;
        this.init();
      });
    },
    getCustomerList() {
      // this.$get("/cjt/common/getCustomerList?countyNo=" + this.countyNo).then(
      this.$get("/cjt/common/getCustomerList").then(
        (res) => {
          this.customerList = res.body;
        }
      );
    },
    // 获取报警类型
    getAlarmTypesLabel() {
      this.$get("/alarm/recording/getAlarmTypesLabel").then((res) => {
        this.alarmTypeList = res.body;
        console.log('this.alarmTypeList',this.alarmTypeList);
      });
    },
    goMineList() {
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/mineList/index?countyNo=${this.countyNo}`,
      });
    },
    goAlarmMinesList(id, label) {
      uni.navigateTo({
        url: `/pages/cjt/alarmSituation/alarmMinesList/alarmMinesList?countyNo=${this.countyNo}&id=${id}&label=${label}`,
      });
    },
    // 获取报警数量
    async getAlarmCount() {
      const params = {
        isRealTime: 0,
        // countyNo: this.countyNo,
      };
      const { body } = await this.$post(
        "/cjt/app/statisticAlarmCustomer",
        params
      );
      this.alarmCounts = body;
    },

    goAlarmList() {
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/mineList/alarmList`,
      });
    },
    handleScroll({ detail }) {
      // 112 是scroll-view到顶部的距离
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#view1")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 0;
          }
        })
        .exec();
      query
        .select("#view2")
        .boundingClientRect((res) => {
          if (res.bottom - 355 > 0 && res.top - 355 < 0) {
            this.current = 1;
          }
        })
        .exec();
    },
    // 获取实时报警情况
    async getRealTimeAlarm() {
      const params = {
        isRealTime: 0,
        // countyNo: this.countyNo,
        pageSize: this.page.pageSize,
        pageNumber: this.page.pageNumber,
      };
      const { body } = await this.$post("/cjt/app/getRealTimeAlarm", params);
      const content = body.content;
      // this.realTimeAlarmList = body.content;
      if (content) {
        this.realTimeAlarmList =
          this.page.pageNumber === 1
            ? content
            : this.realTimeAlarmList.concat(content);
        // 到底了
        if (content.length < this.page.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (
          this.page.pageNumber === 1 &&
          this.realTimeAlarmList &&
          this.realTimeAlarmList.length === 0
        ) {
          this.showEmpty = false;
        } else {
          this.showEmpty = true;
        }
      }
      console.log("this.realTimeAlarmList", this.realTimeAlarmList);
    },
    initList() {
      this.page.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = true;
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.initList();
        this.getRealTimeAlarm();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      if (this.status === "loading") {
        setTimeout(() => {
          console.log(this.status);
          this.page.pageNumber++;
          this.getRealTimeAlarm();
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
}
.scrollView2 {
  height: 500px;
}
.mineBox {
  background-image: url("/static/image/cjt/cjnxzc.png");
  background-size: 100% 100%;
  // padding: 0 10px;
  padding: 10rpx;

  border-radius: 20rpx;
  // text-align: center;
  .mine-num {
    display: flex;
    justify-content: space-between;
  }
  .mine-num-val {
    // color: rgb(61, 95, 255);
    font-size: 16px;
    margin-left: 10px;
  }
}
.city-box {
  //   display: grid;
  //   grid-template-columns: 110px auto;
  //   grid-column-gap: 10px;

  .city-input {
    background: rgba(0, 0, 0, 0.03);
    height: 35px;
    padding: 5px;
    margin-bottom: 10rpx;
    border-radius: 10rpx;
  }

  .mine-num-box {
    background-image: url("/static/image/cjt/cjnxzc.png");
    background-size: 100% 100%;
    padding: 10rpx;
    border-radius: 20rpx;
  }
  .mine-num {
    // text-align: center;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    width: 100%;
    padding: 0 20rpx;
    // height: 45px;
    box-sizing: border-box;
    background: #fff;
    line-height: 45px;
    background-color: rgba(0, 0, 0, 0);
    // background-image: url("/static/image/cjt/cjnxzc.png");
    // background-size: 100% 100%;
  }

  .mine-num-val {
    font-size: 16px;
    margin-left: 10rpx;
    margin-right: 20rpx;
    position: relative;
    top: 1px;
  }
}

.situation {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx 10rpx;
  justify-content: space-between;

  .situationItem {
    // border-left: 10rpx solid greenyellow;
    padding: 20rpx 10rpx 10rpx 20rpx;
    margin-bottom: 20rpx;
    background-color: #f6f6f6;
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10rpx;
    .situationItemText {
      margin: 20rpx 0 0 20rpx;
      .situationItemSpan1 {
        font-size: 35rpx;
        font-weight: 900;
      }
    }
    .situationItem-status {
      position: relative;
      .border {
        position: absolute;
        width: 10rpx;
        background: linear-gradient(to bottom, #ffadad 5%, #f34822);
        height: 40rpx;
        border-radius: 10rpx;
      }
      .situationItem-label {
        margin-left: 20rpx;
      }
    }
  }
}

.realTimeAlarm {
  padding: 0 20rpx;

  .realTimeAlarm-item {
    padding: 10rpx 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 0 10rpx 5rpx rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;

    .realTimeAlarm-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .alarmType {
        font-weight: 900;
        color: black;
      }

      .status {
        font-size: 22rpx;
        color: white;
        // background-color: gray;
        margin-left: 30rpx;
        padding: 2rpx 10rpx;
        border-radius: 10rpx;
      }
    }

    .mines-name,
    .alarm-text {
      color: gray;
      font-size: 25rpx;
      margin-bottom: 20rpx;
    }
  }
}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f6f6f6;

  .more {
    width: 100rpx;
    font-weight: 500;
  }
}

.gzmqk {
  background: linear-gradient(rgb(243, 247, 255), rgba(255, 255, 255, 0));
  border-radius: 6px 6px 0 0;
}

.gzm-box {
  background: linear-gradient(
    rgba(10, 207, 151, 0.5),
    rgba(167, 238, 217, 0.5)
  );
  margin: 10px;
  margin-top: 0;
  border-radius: 6px;
  padding-bottom: 3px;

  .gzm-item-bg {
    padding-top: 10px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 10px;
    border-radius: 6px;

    .gzm-item-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      background: rgba(207, 207, 207, 0.5);
      grid-column-gap: 1px;

      .gzm-item {
        text-align: center;
        background: #fff;
        padding-top: 10px;
        padding-bottom: 10px;

        .gzm-name {
          font-size: 12px;
          margin-top: 10px;
        }
      }
    }

    .gzm-item-box1 {
      grid-template-columns: 1fr 1fr;
    }

    .gzm-item-box2 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.gzm-box-zt {
  background: linear-gradient(rgba(210, 158, 8, 0.5), rgba(239, 220, 166, 0.5));
}

.gzm-box-kg {
  background: linear-gradient(rgb(204, 239, 255), rgba(224, 249, 255, 0.85));
}

.gzm-box-jx {
  background: linear-gradient(rgb(255, 158, 80), rgb(254, 177, 51));
}

.gzm-box-lj {
  background: linear-gradient(rgba(255, 191, 60, 0.5), rgba(255, 191, 60, 0.5));
}

.gzm-title {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.gzmqk-hc {
  background: linear-gradient(rgb(255, 250, 242), rgba(255, 250, 242, 0));
}

// .mineBox {
//   background: #fff;
//   padding: 10px;
//   border-radius: 4px;
//   text-align: center;

//   .mine-num-val {
//     color: rgb(61, 95, 255);
//     font-size: 16px;
//     // margin-left: 10px;
//     // margin-right: 20rpx;
//   }
// }
</style>
